<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<section class="content-header">
    <ol class="breadcrumb">
        <li><a href="#"><i class="fa fa-dashboard"></i> 首页</a></li>
        <li><a href="#">网站管理</a></li>
        <li class="active">编辑文章</li>
    </ol>
</section>
<link rel="stylesheet" type="text/css" th:href="@{/assets/css/layui.css}">
<link rel="stylesheet" type="text/css" th:href="@{/assets/css/view.css}">
<script type="text/css" th:src="@{/js/jquery.min.js}"></script>
<script th:src="@{/assets/layui.all.js}"></script>
<!-- Main content -->
<section class="content">
    <div class="jax-box">
        <div class="box-body">
            <form id="articleForm" class="form-horizontal">
                <input th:value="${article.id}" type="hidden" name="id">
                <input id="status" type="hidden" name="status">
                <input id="articleContent" th:value="${article.content}" type="hidden" name="content">
                <input id="articleContentMd" th:value="${article.contentMd}" type="hidden" name="contentMd">
                <div class="col-lg-8 pl0">
                    <div class="form-group">
                        <div class="col-xs-12">
                            <input type="text" th:value="${article.title}" class="form-control" id="title" name="title" placeholder="请输入文章标题" require="">
                        </div>
                    </div>
                    <div class="form-group form-editor">
                        <div class="col-xs-12">
                            <textarea id="articleField" th:text="${article.content}"></textarea>
                        </div>
                    </div>
                </div>
                <div class="col-lg-4 article-extra">
                    <div class="form-group">
                        <div class="col-xs-12">
                            <a class="article-btn table-btn table-btn-info" onclick="saveArticle()">保存</a>
                        </div>
                    </div>

                    <div class="form-group">
                        <div class="col-xs-12">
                            <label class="control-label label-four">文章分类:</label>
                            <div class="col-xs-6">
                                <select id="category-select" class="form-control" name="categoryId" require="">
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-xs-12">
                            <label class="control-label label-four">文章封面:</label>
                            <div class="input-group ml80" style="position: relative">
                                <input type="hidden" th:value="*{article.coverImage}" class="form-control" name="coverImage" id="coverImage" >
                                <div id="queue">
                                    <img alt="封面" th:src="@{/img/noPic.png}"  width="240px" height="240px">
                                </div><br>
                                <button type="button" class="layui-btn" id="article-pic">
                                    <i class="layui-icon">&#xe67c;</i>上传图片
                                </button>
                            </div>
                        </div>
                    </div>
                    <div id="upload-content" class="upload-content form-group"></div>
                    <div class="form-group">
                        <div class="col-xs-12">
                            <label class="control-label label-four">是否轮播:</label>
                            <div class="tags ml80 checkbox icheck">
                                <label>
                                    <input th:field="*{article.slider}" class="minimal" type="radio"  name="slider"  value="1">是
                                </label>
                                <label>
                                    <input th:field="*{article.slider}" class="minimal" type="radio"  name="slider"  value="0">否
                                </label>
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-xs-12">
                            <label class="control-label label-four">是否置顶:</label>
                            <div class="tags ml80 checkbox icheck">
                                <label>
                                    <input th:field="*{article.top}" class="minimal" type="radio"  name="top"  value="1">是
                                </label>
                                <label>
                                    <input th:field="*{article.top}" class="minimal" type="radio"  name="top"  value="0">否
                                </label>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-4 article-extra mt20">
                    <div class="form-group">
                        <div class="col-xs-12">
                            <label class="control-label label-four">关键词:</label>
                            <div class="ml80">
                                <textarea th:field="*{article.keywords}" type="text" rows="2" class="form-control" name="keywords" require="" placeholder="文章关键词（SEO优化）"></textarea>
                            </div>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>
</section>
</html>
<script>
    var myEditor;
    ClassicEditor
        .create(document.querySelector("#articleField"), {
            language: {
                ui: 'zh-cn'
            },
            ckfinder: {
                uploadUrl: '[[@{/uploadArticleImg}]]'
            }
        })
        .then(editor => {
            myEditor = editor;
        })
        .catch(error => {
            console.error(error);
        });

    $(function () {
        $('#queue').find('img').attr('src', "/images/" + [[${article.coverImage}]] + "?w=200&h=200")
    })
</script>

<script type="text/javascript">
    var contextPath = [[${#request.getContextPath()}]]
    layui.use('upload',function(){
        var upload = layui.upload;
        // 执行实例
        var uploadInst = upload.render({
            elem : '#article-pic',
            url: '/upload',
            done:function (res) { //上传完毕回调
                var id = res.id;
                //将图片路径复制到图片路径属性中
                console.log(res.id);
                showHeadImg(id)
            },
            error:function (res) {
                //请求异常回调
                layer.msg(res.data);
            }
        });
    });
    function showHeadImg(id) {
        if (id) {
            //寻找#imgId下的src标签，设置属性为xxx
            // document.getElementById("coverImage").value = id;
            $("#coverImage").val(id);
            $('#queue').find('img').attr('src', "/images/" + id + "?w=200&h=200");
        }
    }
</script>

<script>
    var categories = "[[${categories}]]";
    var categoryId=[[${article.categoryId}]];
    var categoriesObj = JSON.parse(categories.replace(/&quot;/g, '"'));
    var html='<option value="">请选择</option>';
    $.each(categoriesObj,function (i,item) {
        if(item.nodes.length>0){
            html+='<optgroup label="'+item.name+'" >';
            $.each(item.nodes,function (j,jItem) {
                var isSelected= categoryId==item.id?' selected="selected"':'';
                html+='<option value="'+jItem.id+'"'+isSelected+'>'+jItem.name+'</option>';
            })
            html+='</optgroup>';
        }else if(item.parent==null){
            var isSelected= categoryId==item.id?' selected="selected"':'';
            html+='<option value="'+item.id+'"'+isSelected+'>'+item.name+'</option>';
        }
    })
    $("#category-select").html(html);

    $("input[name=slider]").on('ifChecked', function(event){ //ifCreated 事件应该在插件初始化之前绑定
        var slider = $("input[name=slider]:checked").val();
        var sliderSize=$("#upload-content").find(".upload-slider-div").size();
        if(slider==1){
            $("#sliderImgContent").show();
            if(sliderSize==1){
                $(".upload-slider-div").show();
            }
        }else{
            $("#sliderImgContent").hide();
            if(sliderSize==1){
                $(".upload-slider-div").hide();
            }
        }
    });

    function  saveArticle() {
        if(validArticle()){
            Core.confirm("确认保存文章？",function () {
                Core.postAjax("/article/edit",$("#articleForm").serialize(),function (data) {
                    if(data.status === 200){
                        Core.load("#content","article/listView");
                    }
                    layer.msg(data.msg)
                })
            })
        }
    }

    function  validArticle() {
        if(doValidForm(articleForm)){
            var content = myEditor.getData();
            if(content){
                $("#articleContentMd").val(content);
                $("#articleContent").val(content);
                return true;
            }else{
                layer.msg("请输入文章内容！")
            }
        }
        return false;
    }

</script>